<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Demo</title>
</head>
<body>
	<form id="demo_form">
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username" value="sven"></input></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="password" value="password"></input></td>
			</tr>
			<tr>
				<td>姓名：</td>
				<td><input type="text" name="name" value="SvenAugustus"></input></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" value="提交" onclick="onSubmit();"></input></td>
			</tr>
		</table>
	</form>
	<p id="p_message" style='display:none;'>Hi,<label id="message"></label>.Welcome to Spring MVC.</p>
</body>
<script type="text/javascript" src="../../static/lib/jquery.min.js"></script>
<script type="text/javascript">
	function getContextPath() {
	    var pathname = document.location.pathname;
	    var index = pathname.substr(1).indexOf("/");
	    var context_path = "";
	    
	    if (index !== -1) {
		    context_path = pathname.substr(0, index + 1);
	    }
	    
	    if (context_path && context_path.substr(0, 1) != "/") {
		    context_path = "/" + context_path;
	    }
	    
	    return context_path;
    }

	function createXmlRequest(){ 
		var xmlhttp;
	    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		    xmlhttp = new XMLHttpRequest();
	    } else {// code for IE6, IE5
		    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	    }
	    return xmlhttp;
    }

    function onSubmit() {
    	var url = getContextPath() + "/AjaxDemoController/sayHi.do";
    	var params = {};
		params.username = document.getElementsByName("username")[0].value;
	    params.password = document.getElementsByName("password")[0].value;
	    params.name = document.getElementsByName("name")[0].value;
	    try{
			params = typeof(params) !== "string" ? JSON.stringify(params) : params;
		}
		catch(e){}
		//alert(params);
		
	   	//经典Ajax
	    var xhr = createXmlRequest();
	    xhr.open("POST", //method：请求的类型；GET 或 POST
			     url, //url：文件在服务器上的位置
			     true);//async：true（异步）或 false（同步）
	    xhr.setRequestHeader("Content-type","application/json;charset=UTF-8");
	    xhr.onreadystatechange = function() {
		    if (xhr.readyState == 4 && xhr.status == 200) {
			    var data = JSON.parse(xhr.responseText); // 响应后台输出结果
				//alert(data.result);
			    document.getElementById("demo_form").style.display='none';
			    document.getElementById("p_message").style.display='';
			    document.getElementById("message").innerHTML=data.result.yourname;
		    }
	    };
	    xhr.send(params);//string：仅用于 POST 请求
	     
	    //JQuery Ajax
	     /* jQuery.ajax({
			url: url,
			async: true,//async：true（异步）或 false（同步）
			contentType: "application/json;charset=UTF-8",
			data: params,
			dataType: "text",
			type: "POST",
			dataFilter: function(data, type){
				try{
					data = jQuery.parseJSON(data);
				}
				catch(e){}
				
				return data;
			},
			success: function(data){
				//alert(data.result);
			    document.getElementById("demo_form").style.display='none';
			    document.getElementById("p_message").style.display='';
			    document.getElementById("message").innerHTML=data.result.yourname;
			}
		}); */
    }
</script>
</html>

